<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>用户登录</title>

 <style>
  input[type=username], input[type=password] {
     width: 100%;
     padding: 12px 20px;
     margin: 8px 0;
     display: inline-block;
     border: 1px solid #ccc;
     box-sizing: border-box;
  }
  .denglu {
   background-color: #4CAF50;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   width: 100%;
  }
  button:hover {
   opacity: 0.8;
  }
  .container {
   padding: 16px;
   max-width: 500px;
   margin: auto;
   margin-top: 50px; 
   background-image: url(img/3.jpg);
   border-radius: 20px;
  }
  h2 {
   text-align: center;
  }
  .one{
	  text-decoration: none;
  }
  body{
	  background-image: url("./img/草地.jpg");
	  background-size: 100%;	
  }
 </style>
</head>
<body>
 <div class="container">
  <h2>用户登录</h2>
  <form>
   <label for="username" class="form-label"><b>用户名</b></label>
	 <input  class="form-control username" type="username" placeholder="请输入用户名" name="username" required>
   <label for="password"  class="form-label"><b>密码</b></label>
   <input class="form-control password" type="password" placeholder="请输入密码" name="password" required>

   <input class="denglu" type="submit" value="登录" href="./留言页面.html">
<input type="checkbox" class="remember-me" name="remember-me" />记住密码<br/>
  </form>
  <br>
  <br>
  <a href="./用户注册界面.html" target="_self" class="one">还没有账户？点击注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="one"href="./忘记密码.html" target="_self">忘记密码</a>

 </div>

 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 <script>
   document.querySelector('.denglu').addEventListener('click',
       ()=>{
       const  username =document.querySelector('.username').value
       const  password =document.querySelector('.password').value
           axios({
               url:'http://localhost:8080/login',
               method:'POST',
               data:{
                   username,
                   password
               }
           }).then(result =>{if(
               result=user){
                location.href = './用户页面.html'}
               }).catch(error =>{
                   console.log(error="用户名或密码错误")
           })
       })
 </script>
</body>
</html>